<script>
export default {
  name: 'AddOption',
  data() {
    return {
      title: "",
    }
  },
  methods: {
    addOption() {
      if (this.title.trim() === "") {
        alert("请输入待办事项内容");
      } else {
        const addOptionObj = {
          id: new Date().getTime(),
          title: this.title,
          status: false
        };
        this.title = "";
        console.log(addOptionObj);
        this.addTodo(addOptionObj);
      }
    }
  },
  props:['addTodo']
}
</script>

<template>
  <div class="add">
    <input type="text" v-model:value="title" @keyup.enter="addOption" placeholder="请输入待办事项">
  </div>
</template>

<style scoped>
.add {
  max-width: 400px;
  margin: 0 auto;
  padding: 10px;
}

input[type="text"] {
  width: 95%;
  height: 20px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

input[type="text"]::placeholder {
  color: #888;
}
</style>
